<template>
  <el-date-picker
    v-model="form[item.key]"
    :type="item.dateType"
    :placeholder="placeholder"
    :style="style"
    :disabled="itemDisabled"
    :format="item.formate"
    :value-format="item.formate"
    @change="change"
    :disabled-date="item.disabledDate"
    :default-value="item.defaultValue"
  ></el-date-picker>
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue'
import { DatePick } from '../types'
import useDisabled from '../hooks/useDisabled'
import usePlaceholder from '@/hooks/usePlacehoder'

export default defineComponent({
  props: {
    item: {
      type: Object as PropType<DatePick>,
      required: true,
    },
    form: {
      type: Object as PropType<Record<string, string>>,
      required: true,
    },
    placeholderId: {
      type: String,
      default: () => 'lang.placeholder.input',
    },
    disabled: {
      type: Boolean,
      required: true,
    },
  },
  setup(props) {
    const { form, item } = toRefs(props)
    const change = (value: Date) => {
      //   if (value) {
      //     form.value[item.value.key] = dayjs(value).format(item.value.formate)
      //   }
    }
    const itemDisabled = useDisabled(props.disabled, props.item.disabled)
    const placeholder = usePlaceholder(props.item, 'lang.placeholder.select')

    return {
      change,
      itemDisabled,
      style: {
        width: props.item?.width ? props.item.width + 'px' : '100%',
      },
      placeholder,
    }
  },
})
</script>
